<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="x-UA-Compatible" content="ie=Edge">
   	<meta name="viewport" content="width=device-width, initial-scale=1">
   	<title>Crafty - SpriteAnimation</title>
	<link type="text/css" rel="stylesheet" href="../craftyjs-site.css" />
	<link rel="shortcut icon" href="../favicon.ico">
</head>
<body>
	<div id = "header-background"> </div>
	<div id = "page-frame">
	<div id="header">
		<nav class="navbar">
  			<div class="container-fluid">
  				<div class="navbar-header">
  					<a class="navbar-brand" href="../"> <img class="logo" src="../images/text-logo.png" /> </a>
  					
				</div>
				<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li><a href="../">首页</a></li>
						<li><a href="../getting-started/">快速开始</a></li>
						<li><a href="../documentation/">文档</a></li>
						<li><a href="../api/">API</a></li>
						<li><a href="../components/">组件</a></li>
						<li class="emph"><a href="../#install">下载</a></li>
					</ul>
				</div>
			</div>
		</nav>
	</div>


	<div id="main">
		<div id="content" class="container">
			



<div id="docs"><div class="toc-holder" id="doc-nav"><ul id="doc-level-one"><li><a href="events.html">List of Events</a></li><li class="category">Core<ul class="category-list"><li><a href="Crafty.html">Crafty</a></li><li><a href="Crafty Core.html">Crafty Core</a></li><li><a href="Crafty-bind.html">Crafty.bind()</a></li><li><a href="Crafty-c.html">Crafty.c()</a></li><li><a href="Crafty-clone.html">Crafty.clone()</a></li><li><a href="Crafty-defineField.html">Crafty.defineField()</a></li><li><a href="Crafty-e.html">Crafty.e()</a></li><li><a href="Crafty-extend.html">Crafty.extend()</a></li><li><a href="Crafty-frame.html">Crafty.frame()</a></li><li><a href="Crafty-getVersion.html">Crafty.getVersion()</a></li><li><a href="Crafty-init.html">Crafty.init()</a></li><li><a href="Crafty-isPaused.html">Crafty.isPaused()</a></li><li><a href="Crafty-one.html">Crafty.one()</a></li><li><a href="Crafty-pause.html">Crafty.pause()</a></li><li><a href="Crafty-s.html">Crafty.s()</a></li><li><a href="Crafty-settings.html">Crafty.settings</a></li><li><a href="Crafty-stage.html">Crafty.stage</a></li><li><a href="Crafty-stop.html">Crafty.stop()</a></li><li><a href="Crafty-support.html">Crafty.support</a></li><li><a href="Crafty-trigger.html">Crafty.trigger()</a></li><li><a href="Crafty-unbind.html">Crafty.unbind()</a></li><li><a href="Crafty-uniqueBind.html">Crafty.uniqueBind()</a></li></ul></li><li class="category">2D<ul class="category-list"><li><a href="2D.html">2D</a></li><li><a href="AngularMotion.html">AngularMotion</a></li><li><a href="Collision.html">Collision</a></li><li><a href="Crafty-circle.html">Crafty.circle</a></li><li><a href="Crafty-diamondIso.html">Crafty.diamondIso</a></li><li><a href="Crafty-HashMap.html">Crafty.HashMap</a></li><li><a href="Crafty-isometric.html">Crafty.isometric</a></li><li><a href="Crafty-map.html">Crafty.map</a></li><li><a href="Crafty-math-Matrix2D.html">Crafty.math.Matrix2D</a></li><li><a href="Crafty-math-Vector2D.html">Crafty.math.Vector2D</a></li><li><a href="Crafty-polygon.html">Crafty.polygon</a></li><li><a href="Crafty-raycast.html">Crafty.raycast()</a></li><li><a href="Crafty-rectManager.html">Crafty.rectManager</a></li><li><a href="Gravity.html">Gravity</a></li><li><a href="GroundAttacher.html">GroundAttacher</a></li><li><a href="Motion.html">Motion</a></li><li><a href="Supportable.html">Supportable</a></li></ul></li><li class="category">Animation<ul class="category-list"><li><a href="Crafty-easing.html">Crafty.easing</a></li><li><a href="SpriteAnimation.html">SpriteAnimation</a></li><li><a href="Tween.html">Tween</a></li></ul></li><li class="category">Assets<ul class="category-list"><li><a href="Crafty-asset.html">Crafty.asset()</a></li><li><a href="Crafty-assets.html">Crafty.assets</a></li><li><a href="Crafty-imageWhitelist.html">Crafty.imageWhitelist()</a></li><li><a href="Crafty-load.html">Crafty.load()</a></li><li><a href="Crafty-paths.html">Crafty.paths()</a></li><li><a href="Crafty-removeAssets.html">Crafty.removeAssets()</a></li></ul></li><li class="category">Audio<ul class="category-list"><li><a href="Crafty-audio.html">Crafty.audio</a></li></ul></li><li class="category">Controls<ul class="category-list"><li><a href="Controllable.html">Controllable</a></li><li><a href="Controls.html">Controls</a></li><li><a href="Draggable.html">Draggable</a></li><li><a href="Fourway.html">Fourway</a></li><li><a href="Jumper.html">Jumper</a></li><li><a href="Multiway.html">Multiway</a></li><li><a href="Twoway.html">Twoway</a></li></ul></li><li class="category">Debug<ul class="category-list"><li><a href="Crafty-error.html">Crafty.error()</a></li><li><a href="Crafty-log.html">Crafty.log()</a></li><li><a href="DebugCanvas.html">DebugCanvas</a></li><li><a href="DebugPolygon.html">DebugPolygon</a></li><li><a href="DebugRectangle.html">DebugRectangle</a></li><li><a href="SolidAreaMap.html">SolidAreaMap</a></li><li><a href="SolidHitBox.html">SolidHitBox</a></li><li><a href="VisibleMBR.html">VisibleMBR</a></li><li><a href="WiredAreaMap.html">WiredAreaMap</a></li><li><a href="WiredHitBox.html">WiredHitBox</a></li></ul></li><li class="category">Events<ul class="category-list"><li><a href="Crafty-addEvent.html">Crafty.addEvent()</a></li><li><a href="Crafty-bind.html">Crafty.bind()</a></li><li><a href="Crafty-one.html">Crafty.one()</a></li><li><a href="Crafty-removeEvent.html">Crafty.removeEvent()</a></li><li><a href="Crafty-trigger.html">Crafty.trigger()</a></li><li><a href="Crafty-unbind.html">Crafty.unbind()</a></li><li><a href="Crafty-uniqueBind.html">Crafty.uniqueBind()</a></li></ul></li><li class="category">Game Loop<ul class="category-list"><li><a href="Crafty-timer.html">Crafty.timer</a></li></ul></li><li class="category">Graphics<ul class="category-list"><li><a href="Canvas.html">Canvas</a></li><li><a href="CanvasLayer.html">CanvasLayer</a></li><li><a href="Color.html">Color</a></li><li><a href="Crafty-assignColor.html">Crafty.assignColor()</a></li><li><a href="Crafty-background.html">Crafty.background()</a></li><li><a href="Crafty-createLayer.html">Crafty.createLayer()</a></li><li><a href="Crafty-defaultShader.html">Crafty.defaultShader()</a></li><li><a href="Crafty-domHelper.html">Crafty.domHelper</a></li><li><a href="Crafty-pixelart.html">Crafty.pixelart()</a></li><li><a href="Crafty-sprite.html">Crafty.sprite()</a></li><li><a href="Crafty-WebGLShader.html">Crafty.WebGLShader()</a></li><li><a href="DOM.html">DOM</a></li><li><a href="DomLayer.html">DomLayer</a></li><li><a href="HTML.html">HTML</a></li><li><a href="Image.html">Image</a></li><li><a href="Particles.html">Particles</a></li><li><a href="Renderable.html">Renderable</a></li><li><a href="Sprite.html">Sprite</a></li><li><a href="Text.html">Text</a></li><li><a href="WebGL.html">WebGL</a></li><li><a href="WebGLLayer.html">WebGLLayer</a></li></ul></li><li class="category">Input<ul class="category-list"><li><a href="AreaMap.html">AreaMap</a></li><li><a href="Button.html">Button</a></li><li><a href="Crafty-findPointerEventTargetByComponent.html">Crafty.findPointerEventTargetByComponent()</a></li><li><a href="Crafty-keyboardDispatch.html">Crafty.keyboardDispatch()</a></li><li><a href="Crafty-keydown.html">Crafty.keydown</a></li><li><a href="Crafty-keys.html">Crafty.keys</a></li><li><a href="Crafty-lastEvent.html">Crafty.lastEvent</a></li><li><a href="Crafty-mouseButtons.html">Crafty.mouseButtons</a></li><li><a href="Crafty-mouseDispatch.html">Crafty.mouseDispatch()</a></li><li><a href="Crafty-mouseWheelDispatch.html">Crafty.mouseWheelDispatch()</a></li><li><a href="Crafty-multitouch.html">Crafty.multitouch()</a></li><li><a href="Crafty-selected.html">Crafty.selected</a></li><li><a href="Crafty-touchDispatch.html">Crafty.touchDispatch()</a></li><li><a href="Keyboard.html">Keyboard</a></li><li><a href="Mouse.html">Mouse</a></li><li><a href="MouseDrag.html">MouseDrag</a></li><li><a href="Touch.html">Touch</a></li></ul></li><li class="category">Misc<ul class="category-list"><li><a href="Crafty-addEvent.html">Crafty.addEvent()</a></li><li><a href="Crafty-device.html">Crafty.device</a></li><li><a href="Crafty-removeEvent.html">Crafty.removeEvent()</a></li><li><a href="Crafty-support.html">Crafty.support</a></li></ul></li><li class="category">Model<ul class="category-list"><li><a href="Model.html">Model</a></li></ul></li><li class="category">Scenes<ul class="category-list"><li><a href="Crafty-scene.html">Crafty.scene()</a></li></ul></li><li class="category">Stage<ul class="category-list"><li><a href="Crafty-background.html">Crafty.background()</a></li><li><a href="Crafty-scene.html">Crafty.scene()</a></li><li><a href="Crafty-viewport.html">Crafty.viewport</a></li></ul></li><li class="category">Utilities<ul class="category-list"><li><a href="Crafty-math.html">Crafty.math</a></li><li><a href="Delay.html">Delay</a></li><li><a href="Storage.html">Storage</a></li></ul></li></ul></div><div id="doc-content" class="doc-page-holder"><div class="doc-page"><h1>SpriteAnimation <span class="page-badge">Component</span></h1><div class="doclet" id="SpriteAnimation"><div class="triggered-events"><h4>Events</h4><div class="trigger-list"><dl class="trigger"><dt>StartAnimation <span>[<span class="trigger-data"><span class="obj-name">Data</span><span class="obj-props"> = {Reel}</span></span>]</span></dt><dd>When an animation starts playing, or is resumed from the paused state</dd></dl><dl class="trigger"><dt>AnimationEnd <span>[<span class="trigger-data"><span class="obj-name">Data</span><span class="obj-props"> = { Reel }</span></span>]</span></dt><dd>When the animation finishes</dd></dl><dl class="trigger"><dt>FrameChange <span>[<span class="trigger-data"><span class="obj-name">Data</span><span class="obj-props"> = { Reel }</span></span>]</span></dt><dd>Each time the frame of the current reel changes</dd></dl><dl class="trigger"><dt>ReelChange <span>[<span class="trigger-data"><span class="obj-name">Data</span><span class="obj-props"> = { Reel }</span></span>]</span></dt><dd>When the reel changes</dd></dl></div></div><span class="markdown"><p>Used to animate sprites by treating a sprite map as a set of animation frames.
Must be applied to an entity that has a sprite-map component.</p>
<p>To define an animation, see the <code>reel</code> method.  To play an animation, see the <code>animate</code> method.</p>
<p>A reel is an object that contains the animation frames and current state for an animation.  The reel object has the following properties:</p>
</span><dl class="parameter"><dt> id: (String) </dt><dd><span class="markdown"><p>the name of the reel</p>
</span></dd></dl><dl class="parameter"><dt> frames: (Array) </dt><dd><span class="markdown"><p>A list of frames in the format [xpos, ypos]</p>
</span></dd></dl><dl class="parameter"><dt> currentFrame: (Number) </dt><dd><span class="markdown"><p>The index of the current frame</p>
</span></dd></dl><dl class="parameter"><dt> easing: (Crafty.easing object) </dt><dd><span class="markdown"><p>The object that handles the internal progress of the animation.</p>
</span></dd></dl><dl class="parameter"><dt> duration: (Number) </dt><dd><span class="markdown"><p>The duration in milliseconds.</p>
</span></dd></dl><span class="markdown"><p>Many animation related events pass a reel object as data.  As typical with events, this should be treated as read only data that might be later altered by the entity.  If you wish to preserve the data, make a copy of it.</p>
</span><div><h4>See Also</h4><ul class="see-also-list"><li><a href="Crafty-sprite.html">Crafty.sprite</a></li></ul></div></div><div><h4>Properties</h4><ul class="page-toc"><li><a href="#-animationSpeed">.animationSpeed</a></li></ul><h4>Methods</h4><ul class="page-toc"><li><a href="#-animate">.animate()</a></li><li><a href="#-getReel">.getReel()</a></li><li><a href="#-isPlaying">.isPlaying()</a></li><li><a href="#-loops">.loops()</a></li><li><a href="#-pauseAnimation">.pauseAnimation()</a></li><li><a href="#-reel">.reel()</a></li><li><a href="#-reelPosition">.reelPosition()</a></li><li><a href="#-resetAnimation">.resetAnimation()</a></li><li><a href="#-resumeAnimation">.resumeAnimation()</a></li></ul><div class="doclet" id="-animationSpeed"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">.animationSpeed</h2><span class="markdown"><p>The playback rate of the animation.  This property defaults to 1.</p>
</span></div><div class="doclet" id="-animate"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">.animate()</h2><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">this </span><span class="sig-noun">.animate</span></span><span class="sig-seperator">([</span><span class="sig-phrase"><span class="sig-qualifier">String </span><span class="sig-noun">reelId</span></span><span class="sig-seperator">]</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-noun"></span></span><span class="sig-seperator">[,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Number </span><span class="sig-noun">loopCount</span></span><span class="sig-seperator">])</span></code><dl class="parameter"><dt> reelId </dt><dd><span class="markdown"><p>ID of the animation reel to play.  Defaults to the current reel if none is specified.</p>
</span></dd></dl><dl class="parameter"><dt> loopCount </dt><dd><span class="markdown"><p>Number of times to repeat the animation. Use -1 to repeat indefinitely.  Defaults to 1.</p>
</span></dd></dl></div><span class="markdown"><p>Play one of the reels previously defined through <code>.reel(...)</code>. Simply pass the name of the reel. If you wish the
animation to play multiple times in succession, pass in the amount of times as an additional parameter.
To have the animation repeat indefinitely, pass in <code>-1</code>.</p>
<p>If another animation is currently playing, it will be paused.</p>
<p>This will always play an animation from the beginning.  If you wish to resume from the current state of a reel, use <code>resumeAnimation()</code>.</p>
<p>Once an animation ends, it will remain at its last frame.</p>
</span><div class="example"><h4>Example</h4><span class="markdown"><pre><code class="hljs "><span class="hljs-comment">// Define a sprite-map component</span>
Crafty.sprite(<span class="hljs-number">16</span>, <span class="hljs-string">"images/sprite.png"</span>, {
    <span class="hljs-attr">PlayerSprite</span>: [<span class="hljs-number">0</span>,<span class="hljs-number">0</span>]
});

<span class="hljs-comment">// Play the animation across 20 frames (so each sprite in the 4 sprite animation should be seen for 5 frames) and repeat indefinitely</span>
Crafty.e(<span class="hljs-string">"2D, DOM, SpriteAnimation, PlayerSprite"</span>)
    .reel(<span class="hljs-string">'PlayerRunning'</span>, <span class="hljs-number">20</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">3</span>) <span class="hljs-comment">// setup animation</span>
    .animate(<span class="hljs-string">'PlayerRunning'</span>, <span class="hljs-number">-1</span>); <span class="hljs-comment">// start animation</span></code></pre></span></div></div><div class="doclet" id="-getReel"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">.getReel()</h2><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">Reel </span><span class="sig-noun">.getReel</span></span><span class="sig-seperator">()</span></code><dl class="parameter returns"><dt class="returns"> [Returns] </dt><dd><span class="markdown"><p>The current reel, or null if there is no active reel</p>
</span></dd></dl></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">Reel </span><span class="sig-noun">.getReel</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-noun">reelId</span></span><span class="sig-seperator">)</span></code><dl class="parameter"><dt> reelId </dt><dd><span class="markdown"><p>The id of the reel to fetch.</p>
</span></dd></dl><dl class="parameter returns"><dt class="returns"> [Returns] </dt><dd><span class="markdown"><p>The specified reel, or <code>undefined</code> if no such reel exists.</p>
</span></dd></dl></div></div><div class="doclet" id="-isPlaying"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">.isPlaying()</h2><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">Boolean </span><span class="sig-noun">.isPlaying</span></span><span class="sig-seperator">([</span><span class="sig-phrase"><span class="sig-qualifier">String </span><span class="sig-noun">reelId</span></span><span class="sig-seperator">])</span></code><dl class="parameter"><dt> reelId </dt><dd><span class="markdown"><p>The reelId of the reel we wish to examine</p>
</span></dd></dl><dl class="parameter returns"><dt class="returns"> [Returns] </dt><dd><span class="markdown"><p>The current animation state</p>
</span></dd></dl></div><span class="markdown"><p>Determines if the specified animation is currently playing. If no reelId is specified,
checks if any animation is playing.</p>
</span><div class="example"><h4>Example</h4><span class="markdown"><pre><code class="hljs ">myEntity.isPlaying() <span class="hljs-comment">// is any animation playing</span>
myEntity.isPlaying(<span class="hljs-string">'PlayerRunning'</span>) <span class="hljs-comment">// is the PlayerRunning animation playing</span></code></pre></span></div></div><div class="doclet" id="-loops"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">.loops()</h2><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">this </span><span class="sig-noun">.loops</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">Number </span><span class="sig-noun">loopCount</span></span><span class="sig-seperator">)</span></code><dl class="parameter"><dt> loopCount </dt><dd><span class="markdown"><p>The number of times to play the animation</p>
</span></dd></dl></div><span class="markdown"><p>Sets the number of times the animation will loop for.
If called while an animation is in progress, the current state will be considered the first loop.</p>
</span><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">Number </span><span class="sig-noun">.loops</span></span><span class="sig-seperator">()</span></code><dl class="parameter returns"><dt class="returns"> [Returns] </dt><dd><span class="markdown"><p>The number of loops left.  Returns 0 if no reel is active.</p>
</span></dd></dl></div></div><div class="doclet" id="-pauseAnimation"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">.pauseAnimation()</h2><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">this </span><span class="sig-noun">.pauseAnimation</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-noun">void</span></span><span class="sig-seperator">)</span></code></div><span class="markdown"><p>Pauses the currently playing animation, or does nothing if no animation is playing.</p>
</span></div><div class="doclet" id="-reel"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">.reel()</h2><span class="markdown"><p>Used to define reels, to change the active reel, and to fetch the id of the active reel.</p>
</span><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">this </span><span class="sig-noun">.reel</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">String </span><span class="sig-noun">reelId</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Duration </span><span class="sig-noun">duration</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Number </span><span class="sig-noun">fromX</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Number </span><span class="sig-noun">fromY</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Number </span><span class="sig-noun">frameCount</span></span><span class="sig-seperator">[,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Number </span><span class="sig-noun">rowLength</span></span><span class="sig-seperator">])</span></code><span class="markdown"><p>Defines a reel by starting and ending position on the sprite sheet.</p>
</span><dl class="parameter"><dt> reelId </dt><dd><span class="markdown"><p>ID of the animation reel being created</p>
</span></dd></dl><dl class="parameter"><dt> duration </dt><dd><span class="markdown"><p>The length of the animation in milliseconds.</p>
</span></dd></dl><dl class="parameter"><dt> fromX </dt><dd><span class="markdown"><p>Starting <code>x</code> position on the sprite map (x&#39;s unit is the horizontal size of the sprite in the sprite map).</p>
</span></dd></dl><dl class="parameter"><dt> fromY </dt><dd><span class="markdown"><p><code>y</code> position on the sprite map (y&#39;s unit is the horizontal size of the sprite in the sprite map). Remains constant through the animation.</p>
</span></dd></dl><dl class="parameter"><dt> frameCount </dt><dd><span class="markdown"><p>The number of sequential frames in the animation.  If negative, the animation will play backwards.</p>
</span></dd></dl><dl class="parameter"><dt> rowLength </dt><dd><span class="markdown"><p>The number of frames in a sprite sheet row.                    The sequential frames will auto-wrap to a new row when they reach the end of the current row.                    This is an optional argument that defaults to <code>Infinity</code>.</p>
</span></dd></dl></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">this </span><span class="sig-noun">.reel</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">String </span><span class="sig-noun">reelId</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Duration </span><span class="sig-noun">duration</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Array </span><span class="sig-noun">frames</span></span><span class="sig-seperator">)</span></code><span class="markdown"><p>Defines a reel by an explicit list of frames</p>
</span><dl class="parameter"><dt> reelId </dt><dd><span class="markdown"><p>ID of the animation reel being created</p>
</span></dd></dl><dl class="parameter"><dt> duration </dt><dd><span class="markdown"><p>The length of the animation in milliseconds.</p>
</span></dd></dl><dl class="parameter"><dt> frames </dt><dd><span class="markdown"><p>An array of arrays containing the <code>x</code> and <code>y</code> values of successive frames: [[x1,y1],[x2,y2],...] (the values are in the unit of the sprite map&#39;s width/height respectively).</p>
</span></dd></dl></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">this </span><span class="sig-noun">.reel</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">String </span><span class="sig-noun">reelId</span></span><span class="sig-seperator">)</span></code><span class="markdown"><p>Switches to the specified reel.  The sprite will be updated to that reel&#39;s current frame</p>
</span><dl class="parameter"><dt> reelID </dt><dd><span class="markdown"><p>the ID to switch to</p>
</span></dd></dl></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">Reel </span><span class="sig-noun">.reel</span></span><span class="sig-seperator">()</span></code><dl class="parameter returns"><dt class="returns"> [Returns] </dt><dd><span class="markdown"><p>The id of the current reel</p>
</span></dd></dl></div><span class="markdown"><p>A method to handle animation reels.  Only works for sprites built with the Crafty.sprite methods.
See the Tween component for animation of 2D properties.</p>
<p>To setup an animation reel, pass the name of the reel (used to identify the reel later), and either an
array of absolute sprite positions or the start x on the sprite map, the y on the sprite map and then the end x on the sprite map.</p>
</span><div class="example"><h4>Example</h4><span class="markdown"><pre><code class="hljs "><span class="hljs-comment">// Define a sprite-map component</span>
Crafty.sprite(<span class="hljs-number">16</span>, <span class="hljs-string">"images/sprite.png"</span>, {
    <span class="hljs-attr">PlayerSprite</span>: [<span class="hljs-number">0</span>,<span class="hljs-number">0</span>]
});

<span class="hljs-comment">// Define an animation on the second row of the sprite map (fromY = 1)</span>
<span class="hljs-comment">// from the left most sprite (fromX = 0) to the fourth sprite</span>
<span class="hljs-comment">// on that row (frameCount = 4), with a duration of 1 second</span>
Crafty.e(<span class="hljs-string">"2D, DOM, SpriteAnimation, PlayerSprite"</span>).reel(<span class="hljs-string">'PlayerRunning'</span>, <span class="hljs-number">1000</span>, <span class="hljs-number">0</span>, <span class="hljs-number">1</span>, <span class="hljs-number">4</span>);

<span class="hljs-comment">// This is the same animation definition, but using the alternative method</span>
Crafty.e(<span class="hljs-string">"2D, DOM, SpriteAnimation, PlayerSprite"</span>).reel(<span class="hljs-string">'PlayerRunning'</span>, <span class="hljs-number">1000</span>, [[<span class="hljs-number">0</span>, <span class="hljs-number">1</span>], [<span class="hljs-number">1</span>, <span class="hljs-number">1</span>], [<span class="hljs-number">2</span>, <span class="hljs-number">1</span>], [<span class="hljs-number">3</span>, <span class="hljs-number">1</span>]]);</code></pre></span></div></div><div class="doclet" id="-reelPosition"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">.reelPosition()</h2><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">this </span><span class="sig-noun">.reelPosition</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">Integer </span><span class="sig-noun">position</span></span><span class="sig-seperator">)</span></code><span class="markdown"><p>Sets the position of the current reel by frame number.</p>
</span><dl class="parameter"><dt> position </dt><dd><span class="markdown"><p>the frame to jump to.  This is zero-indexed.  A negative values counts back from the last frame.</p>
</span></dd></dl></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">this </span><span class="sig-noun">.reelPosition</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">Number </span><span class="sig-noun">position</span></span><span class="sig-seperator">)</span></code><span class="markdown"><p>Sets the position of the current reel by percent progress.</p>
</span><dl class="parameter"><dt> position </dt><dd><span class="markdown"><p>a non-integer number between 0 and 1</p>
</span></dd></dl></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">this </span><span class="sig-noun">.reelPosition</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">String </span><span class="sig-noun">position</span></span><span class="sig-seperator">)</span></code></div><span class="markdown"><p>Jumps to the specified position.  The only currently accepted value is &quot;end&quot;, which will jump to the end of the reel.</p>
</span><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">Number </span><span class="sig-noun">.reelPosition</span></span><span class="sig-seperator">()</span></code><dl class="parameter returns"><dt class="returns"> [Returns] </dt><dd><span class="markdown"><p>The current frame number</p>
</span></dd></dl></div></div><div class="doclet" id="-resetAnimation"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">.resetAnimation()</h2><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">this </span><span class="sig-noun">.resetAnimation</span></span><span class="sig-seperator">()</span></code></div><span class="markdown"><p>Resets the current animation to its initial state.  Resets the number of loops to the last specified value, which defaults to 1.</p>
<p>Neither pauses nor resumes the current animation.</p>
</span></div><div class="doclet" id="-resumeAnimation"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">.resumeAnimation()</h2><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">this </span><span class="sig-noun">.resumeAnimation</span></span><span class="sig-seperator">()</span></code></div><span class="markdown"><p>This will resume animation of the current reel from its current state.
If a reel is already playing, or there is no current reel, there will be no effect.</p>
</span></div></div></div></div></div>
			
		</div>
	</div>
	<div class="clearer"></div>
	<div id="footer">
		<div id="contact">
			<a href="https://groups.google.com/forum/#!forum/craftyjs">
				<img src="../images/google.png" />
				google groups</a>
			<a href="mailto:starwed@gmail.com">
				<img src="../images/email.png" />
				starwed@gmail.com</a>
			<a href="https://github.com/craftyjs/Crafty">
				<img src="../images/github.png" />
				github</a>
		</div>
		<ul>
			<li><a href="../">首页</a></li>
				<li><a href="../getting-started/">快速开始</a></li>
				<li><a href="../documentation/">文档</a></li>
				<li><a href="../api/">API</a></li>
				<li><a href="../components/">组件</a></li>
				<li class="emph"><a href="../#install">下载</a></li>
		</ul>
		<p>
			&copy; Crafty 2010-2015. Crafty is distributed under the <a href="http://en.wikipedia.org/wiki/MIT_License">MIT License</a>.
		</p>
	</div>
</div>
</body>
</html>
